<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
    <script type="text/javascript" src="http://www.srcfans.com/js/jquery-1.9.1.min.js"></script>
    <script src="bootstrap-treeview.js"  type="text/javascript"></script><!--网上下载一个bootstrap-treeview.js文件-->
    <script type="text/javascript">
        $(function () {
            function getData(){
                var data = [{
                    id:"00000",
                    text: "中国",
                    nodes: [{text: "北京", id: '00001' },
                        { text: "上海", id: '00002' },
                        { text: "江苏", id: '00003' },
                        { text: "河南", id: '00004',
                            nodes: [{ text: '郑州', id: '00005'}]}]

                }];
                return data;
            }
            $('#tree').treeview({
                data: getData(),         // data is not optional
                levels: 5,
                multiSelect: false,
                onNodeSelected:function(event,node){
                    $("#txtArea").val(node.text);
                    $("#txtid").val(node.id);
                }
            });
        })
    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div id="tree"></div>
        </div>
        <div class="col-sm-8">
            <div style="width:700px;height:500px;background:#f0f0f0">
                地区：<input id="txtArea" style="width:200px;" />
                编码：<input id="txtid" style="width:200px;" />
            </div>
        </div>
    </div>
</div>
</body>
</html>